<template>
	<view class="device">
		<navBar :title="$t('add.device')"></navBar>
		<view v-if="isList">
			<view class="device-img w_90 flex_1">
				<image style="width:236rpx; height: 580rpx;" src="/static/image/shebe.jpg" mode="aspectFit"></image>
			</view>
			<view class="flex_a btn-box w_90">
				<view class="flex_col_center" @click="saoCode">
					<image class="marg_bottom_20" style="width:84rpx;height: 84rpx;" src="/static/image/icon-sm.png">
					</image>
					<view>{{$t('home.Scan-code-add')}}</view>
				</view>
				<view class="flex_col_center" @click="isList = false">
					<image class="marg_bottom_20" style="width:84rpx;height: 84rpx;"
						src="/static/image/icon-finger.png"></image>
					<view>{{$t('home.Manually-add')}}</view>
				</view>
			</view>
		</view>

		<view v-else>
			<view class="device-img w_90 flex_col_center" v-if="isDevice">
				<image style="width:236rpx; height: 580rpx;" src="/static/image/shebe.jpg" mode="aspectFit"></image>
				<view class="font_size_32 marg_top_50 marg_bottom_20">{{$t('home.Welcome-COUPOUQ')}}</view>
				<view class="font_size_24 color_theme">{{$t('home.intelligence-care')}} {{deviceNumber}}</view>
			</view>

			<view class="device-img w_90 flex_1" v-else>
				<image style="width:236rpx; height: 580rpx;" src="/static/image/shebe.jpg" mode="aspectFit"></image>
				<image class="bm" src="/static/image/bm.png"></image>
			</view>

			<view class="w_90">
				<view class="input-box flex" v-if="!isDevice">
					<input type="text" :placeholder="$t('please.number')" v-model="deviceNumber">
				</view>
				<button v-if="!isDevice" class="btn yx" @click="hanleClickAdd(1)">{{$t('home.Add-now')}}</button>
				<button v-else class="btn yx" @click="hanleClickAdd(2)">{{$t('home.Add-now')}}</button>
			</view>
		</view>



		<!-- 报错弹窗 -->
		<popup-error ref="PopupError" @confirm="handleErrorConfirm" :content="content"></popup-error>

	</view>
</template>
<script>
	import {
		addDevice,
		deviceInfo,

	} from '@/api/device.js'
	import PopupError from '@/componets/PopupError.vue';
	export default {
		components: {
			PopupError,
		},
		data() {
			return {
				isList: true,
				deviceNumber: '', //设备号
				isDevice: false, //是否显示有效设备
				content: 'SN号无效，请重新输入！', //错误弹窗内容
				status: ''
			};
		},
		// onShow() {
		// 	this.isDevice = false
		// },
		onLoad(e) {
			// #ifdef MP-WEIXIN
			let url = decodeURIComponent(e.q);
			if (url == 'undefined') {
				return;
			}
			// #endif

			// #ifdef MP-ALIPAY
			console.log('App onLoad', e);
			if (e && e.query && e.query.qrCode) {
				console.log(e, 'APP onLoad 支付宝扫码进入')
				// let url = decodeURIComponent(e.query.qrCode);
				// //微信接入的参数是 e.query.q
				// //支付宝接入的参数是 e.query.qrCode
				// let flowPointQRCode = gup('id', url);
				// uni.setStorageSync('flowPointQRCode', flowPointQRCode)
			}
			// #endif

			let sn = this.snCapture(url);

			// 小程序扫码跳转逻辑
			this.addDevice(sn);
			console.log('sn==', sn); // 输出：C001025051150001	
		},
		methods: {
			// 添加设备
			addDevice(sn) {
				addDevice({
					sn: sn || this.deviceNumber
				}).then((r) => {
					console.log(this.status, 'this.status')
					this.config.Toast(this.$t('add.success'));
					if (this.status == 1) {
						setTimeout(() => {
							uni.switchTab({
								url: `/pages/home/home`,
							});
						}, 2000)
					} else {
						setTimeout(() => {
							uni.switchTab({
								url: `/pages/device/device`,
							});
						}, 2000)
					}

				}).catch((err) => {
					console.log('err==', err);
					if (err.data.code == 501) {
						this.config.Toast('非注册设备！');
					} else if (err.data.code == 500 || err.data.message == "不可以重复绑定！") {
						this.config.Toast(this.$t('cannot.bind.repeatedly'));
						setTimeout(() => {
							uni.switchTab({
								url: `/pages/device/device`,
							});
						}, 2000)
					}
				})
			},
			// 截取sn号后16位
			snCapture(url) {
				let match = url.match(/sn=([^&]+)/);
				if (match) {
					let snFull = match[1]; // 获取sn参数的完整值
					let sn = snFull.substring(snFull.length - 16);
					return sn;
				} else {
					console.error('sn参数未找到');
					return null;
				}
			},
			saoCode() {
				uni.scanCode({
					success: (res) => {
						// 成功回调，res.result 是扫描结果
						this.isList = false;
						let sn = this.snCapture(res.result);
						console.log('扫描结果==', sn);
						this.deviceInfo(sn)
						// 这里可以根据扫描结果进行后续处理						
					},
					fail: (err) => {
						// 失败回调
						console.error('err==', err);
						// this.content = '设备二维码无效，请重新添加1！';
						// this.$refs.PopupError.open();
					},
					complete: () => {
						// 完成回调
					},
					// 可以指定来源是相册还是相机，默认二者都有
					sourceType: ['album', 'camera']
				});
			},
			// 立即添加  1是有输入框添加按钮，2是搜索到设备后确认添加
			hanleClickAdd(type) {
				if (type == 1) {
					if (this.deviceNumber) {
						// 查询是否有设备
						this.deviceInfo();
					} else {
						this.content = 'SN号无效，请重新输入！';
						this.$refs.PopupError.open();
					}
				} else {
					// 添加设备
					this.addDevice();
				}
			},
			// 搜索设备是否存在
			deviceInfo(params) {
				deviceInfo({
					sn: params || this.deviceNumber
				}).then((r) => {
					console.log('params==', r.data, params)
					this.status = r.data.status
					if (params) {
						this.deviceNumber = params
					}
					this.isDevice = true;
				}).catch((err) => {
					console.log('err===', err)
					if (err.code != 4001) {
						if (params) {
							this.content = '设备二维码无效，请重新添加！';
							this.isList = true;
						} else {
							this.content = 'SN号无效，请重新输入！';
						}
						this.$refs.PopupError.open();
					}
				})
			},
			handleErrorConfirm() {
				// 这里添加你想要执行的代码
				console.log('知道了');
			},
		}
	}
</script>

<style lang="scss" scoped>
	.device {
		.device-img {
			margin-top: 30rpx;
			padding: 40rpx 0;
			box-sizing: border-box;
			border-radius: 10rpx;
			margin-bottom: 30rpx;
			background-color: #ffffff;
			position: relative;

			.bm {
				width: 236rpx;
				height: 230rpx;
				position: absolute;
				right: 25rpx;
				bottom: 50rpx;
			}
		}

		.btn-box {
			background-color: #ffffff;
			font-size: 30rpx;
			border-radius: 10rpx;
			padding: 43rpx;
			box-sizing: border-box;
		}

		.input-box {
			margin-top: 80rpx;
			height: 94rpx;
			background: #FFFFFF;
			border-radius: 20rpx;
			padding: 0 47rpx;
			box-sizing: border-box;

			input {
				color: #999999;
				font-size: 32rpx;
				width: 100%;
			}
		}
	}
</style>